import React from 'react';

import ReactDOM from 'react-dom/client';

import { BrowserRouter as Router, Route, Routes, NavLink } from 'react-router-dom';

// 导入 Ant Design 组件
import { Layout, Menu, Space } from 'antd';
// 通过 解构赋值 将 Layout 内部的组件赋值给指定变量
const { Header, Content, Footer } = Layout;

// 导入 icon 组件
import { SwapOutlined, SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';

import App from './App';
import Home from './Home';
import UserLogin from './UserLogin'

import 'antd/dist/antd.css';
import './index.css';

const element = document.getElementById('root');

const root = ReactDOM.createRoot( element );

// 采用类似于 Vue 中定义路由记录的方式定义一个数组
const routeRecords = [
  { path: '/' , name: 'root' , text: '首页' },
  { path: '/home' , name: 'home' , text: '主页' },
  { path: '/about' , name: 'about' , text: '关于' },
  { path: '/user/login' , name: 'userLogin' , text: '登录' }
];

// 将 routeRecords 数组中每个元素 映射成 MenuItemType 对象
const menuItems = routeRecords.map( (recored) => {
  return { 
    key: recored.name , 
    label: <NavLink to={ recored.path }>{ recored.text }</NavLink> 
  }
});

root.render(
  <React.StrictMode>
    {/* 用 Router 包裹整个应用 */}
    <Router>
      {/* - - - 页面整体布局开始 - - - */}
      <Layout className="layout">
        <Header>
          <div className="logo"></div>
          {/* - - - 水平导航菜单 - - - */}
          <Menu theme="dark" 
                mode="horizontal" 
                defaultSelectedKeys={['root']}
                items={ menuItems }/>
        </Header>
        <Content style={ { padding: '0 50px' } }>
          {/* 定义路由 */}
          <Routes>
            {/* 外层路由 */}
            <Route path="/" element={ <App />}>
              {/* 内层路由 */}
              <Route path="home" element={ <Home /> }></Route>
              <Route path="about" element={ 
                <main style={ { background: '#ff0' } }>About</main>
              }></Route>
              <Route path="*" element={ <p>There's nothing here!</p> } />
            </Route>
            {/* 外层路由 */}
            <Route path="/user" element={ <App />}>
              <Route path="login" element={ <UserLogin /> } />
            </Route>
          </Routes>
          {/* 使用 icons 组件 */}
          <Space>
            <SwapOutlined />
            <SmileTwoTone />
            <HeartTwoTone twoToneColor="#eb2f96" />
            <CheckCircleTwoTone twoToneColor="#52c41a" />
          </Space>
        </Content>
        <Footer style={ { textAlign: 'center' } }> &copy;2022 </Footer>
      </Layout>
      {/* - - - 页面整体布局结束 - - - */}
    </Router>
  </React.StrictMode>
);
